<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品信息</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/fk.css" />
    <link rel="stylesheet" type="text/css" href="css/header.css"/>
    <script src="js/jquery.min.js"></script>
	<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="weibi" class="bg1">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">收银台</h1>
	</header>
    <section>

    <div class="cont-wrap main-header">
        <div class="cont-head">
            <a class="cont-title ver-center">
                <p>商品信息</p>
            </a>
        </div>
        <div class="cont-main1 bgWhite">
            <div class="merchandise-news">
            	<img class="ico-img" src="image/icons/appliance.png"/>
            	<b class="Commodity-title">电视机</b>
            	<span class="money">￥<span class="price">3000</span></span>
            </div> 
            
        </div>
    </div>
    
    <div class="cont-wrap bgWhite">
        <div class="cont-head">
            <div class="cont-title ver-center">
                <p>积分抵扣</p>
            </div>
        </div>
        <div class="functionList functionList1">
            <div class="list display-box">
                <a  class="display-box enter" id="openVip" >
                    <div class="title Center"><h5>当前可用积分1000</h5></div>
					<div class="arrow Center">
						<input type="text"  id="jf" value="" placeholder="-1000"/>
					</div>
                </a>
            </div>
    	</div>
    </div>
    
    <div class="cont-wrap bgWhite">
        <div class="cont-head">
            <a class="cont-title ver-center">
                <p>金额信息</p>
            </a>
        </div>
        <div class="functionList functionList1">
            <div class="list display-box">
                <div  class="display-box enter" id="openVip" >
					<div class="title Center"><h5>商品总额</h5></div>
					<div class="arrow Center">
						<span>￥3000</span>
					</div>
                </div>
            </div>
        <div class="list display-box">
                    <div  class="display-box enter" id="openVip" >
                    	<div class="title Center"><h5>应付金额</h5></div>
						<div class="arrow Center"><span >￥2900</span></div>
                        </div>
                    </div>
    </div>
    </div>
    <div class="cont-wrap bgWhite">
        <div class="cont-head">
            <a class="cont-title ver-center">
                <p>选择支付方式</p>
            </a>
        </div>
        <div class="cont-main2">
            <ul class="payStyle cont-li">
                <li class="ver-center">
                    <div class="ico Center"><i class="iconfont icon-zhifubaozhifu" style="color:#1983d1"></i></div>
                    <div class="title flex-1"><h5>支付宝支付</h5></div>
                    <div class="select" data-id="alipay"><div class="gouxuan"><i class="iconfont icon-xuanze1"></i></div></div>
                </li>
                <li class="ver-center">
                    <div class="ico Center"><i class="iconfont icon-weixinzhifu" style="color:#00bd0b"></i></div>
                  <div class="title flex-1"><h5>微信支付</h5></div>
                    <div class="select" data-id="wxpay"><div class="gouxuan"><i class="iconfont icon-xuanze1"></i></div></div>
                </li>
                <li class="ver-center">
                    <div class="ico Center"><img class="yueimg" src="image/qianbao.png"/></div>
                  <div class="title flex-1"><h5>余额支付</h5></div>
                    <div class="select" data-id="wxpay"><div class="gouxuan"><i class="iconfont icon-xuanze1"></i></div></div>
                </li>
            </ul>
        </div>
    </div>
    <p class="zf">
    	<a><button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">确认支付</button></a>
    </p>
    </section>

<script src="js/mui.min.js"></script>
<script src="js/html/common.js"></script>
<!--<script src="js/html/weibi.js"></script>-->
	  <script type="text/javascript" src="js/fastclick.js"></script>
<script>
  $(function() {
		FastClick.attach(document.body);
  });
</script>
<script>
    $('.payStyle li .select').click(function(){
        $(this).addClass('selected').parents().siblings('li').children('.select').removeClass('selected')
    })
    var $buyDes=$('footer .buy-des span');
    var $Price=$('footer .totalPrice .priceNum');
    $('.cont-main>ul li').click(function(){
        $(this).addClass('hover').siblings().removeClass('hover');
        var num=$(this).children('div').find('.num').html();
        var price=$(this).children('div').find('.price').html().split('￥')[1]+"元";
        $buyDes.html(num)
        $Price.html(price)
    })
    
    $(".mui-btn").click(function(){
    	mui.openWindow({
    		url:"dhcg.html",
    		id:"dhcg.html",
    	})
    })
</script>
</body>
</html>
